<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :span="8">
        <el-input v-model="queryForm.userName" placeholder="请输入账号" style="width: 100%;" @></el-input>
      </el-col>
      <el-col :span="8">
        <el-input v-model="queryForm.deviceId" placeholder="请输入设备号" style="width: 100%;" @></el-input>
      </el-col>
      <el-col :span="6" style="text-align: start;">
        <el-button type="danger" @click="handleSearch">查询</el-button>
      </el-col>
    </el-row>
    <div v-show="deviceList.length>0" style="width: 100%;margin-top: 10px;">
      <el-table :data="deviceList" style="width: 100%;border-radius: 3px;">
        <el-table-column prop="userName" label="姓名" width="100">
        </el-table-column>
        <el-table-column label="设备">
          <div slot-scope="scope" style="font-size: 8px;">
            <div style="font-weight: bold;">
              <span v-if="scope.row.status == '1'" style="color: #67C23A;">{{scope.row.deviceId}}(已激活)</span>
              <span v-else-if="scope.row.status == '2'" style="color: #909399;">{{scope.row.deviceId}}(未激活)</span>
              <span v-else-if="scope.row.status == '0'" style="color: #F56C6C;">{{scope.row.deviceId}}(已冻结)</span>
              <span v-else style="color: #F56C6C;">{{scope.row.deviceId}}(未知)</span>
            </div>
            <div>
              <template v-if="scope.row.osDeviceType == 'COMPUTER'">
                <i class="el-icon-monitor"></i>
              </template>
              <template v-else-if="scope.row.osDeviceType == 'MOBILE'">
                <i class="el-icon-mobile-phone"></i>
              </template>
              <template v-else>
                <i class="el-icon-files"></i>
              </template>
              {{ scope.row.osName }} - {{ scope.row.browserName }}{{ scope.row.browserVersion }}
            </div>
          </div>
        </el-table-column>
        <el-table-column fixed="right" width="80" label="操作">
          <template slot-scope="scope">
            <el-popconfirm v-if="scope.row.status == '1'" title="确定要冻结设备吗？"
              @confirm="handleChangeDeviceStatus(scope.row, '0')">
              <el-button type="text" slot="reference">冻结</el-button>
            </el-popconfirm>
            <el-popconfirm v-else title="确定要激活设备吗？" @confirm="handleChangeDeviceStatus(scope.row, '1')">
              <el-button type="text" slot="reference">激活</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="info" round @click="handleReload">重置页面</el-button>
      <el-button type="warning" round @click="handleLogout">退出登录</el-button>
    </div>
  </div>

</template>
<script>
  import { mapActions, mapGetters } from 'vuex'
  import { getDeviceList, updateDeviceStatus } from '@/api/device'

  export default {
    name: 'Layout',
    data() {
      return {
        queryForm: {
          userName: '',
          deviceId: ''
        },
        deviceList: []
      }
    },
    methods: {
      ...mapActions(['Logout']),
      handleSearch() {
        this.queryForm.userName = this.queryForm.userName.trim()
        this.queryForm.deviceId = this.queryForm.deviceId.trim()
        if (this.queryForm.userName == "" && this.queryForm.deviceId == "") {
          this.$message.warning('请输入查询条件')
          return
        }
        getDeviceList({
          userName: `*${this.queryForm.userName}*`,
          deviceId: `*${this.queryForm.deviceId}*`,
          column: 'createTime',
          order: 'desc',
          pageSize: 20
        }).then(res => {
          if (res.success && res.result && res.result.records.length > 0) {
            this.deviceList = res.result.records
          } else {
            this.$message.warning('未查询到数据')
          }
        })
      },
      handleChangeDeviceStatus(device, status) {
        updateDeviceStatus({ id: device.id, status }).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.handleSearch()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      handleReload() {
        this.deviceList = []
        this.queryForm = {}
      },
      handleLogout() {
        let that = this
        this.$confirm('确定要退出系统吗 ?', '退出登录', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            that.Logout({}).then((res) => {
              window.location.href = '/'
            })
          })
          .catch(() => {
            // 取消退出
            console.log('取消退出')
          })
      }
    }
  }
</script>